<template>
  <div>
    <div class="bank_lb1" v-for="(bank, index) in list" :key="index">
      <h1><img :src="logo" />银行卡{{index+1}}</h1>
      <div class="bank_xx">
        <div class="bankl_l"><p>开户名：{{bank.accountName}}</p>
            <p :title="bank.openingBank">开户行：{{bank.openingBank}}</p>
            <p :title="bank.accountNumber">银行卡号：{{bank.accountNumber}}</p>
          </div>
          <div class="bankl_r">
            <img v-if="bank.picture" :src="`${bank.picture}?x-oss-process=image/resize,h_200`" :alt="bank.accountNumber" @click="previewImageModal(bank.picture)" style="cursor: pointer;"/>
            <div v-if="!bank.picture" class="emptyPic"></div>
          </div>
      </div>
      <div class="bank_button" v-if="!view">
        <button type="button" v-if="list.length > 1" @click="deleteACard(index)"><span>删除</span></button>
        <button type="button" @click="editACard(index)"><span>编辑</span></button>
      </div>
    </div>

    <!-- 查看图片 -->
    <preview-img-modal v-if="previewImage" :src="previewImage" @clear-src="clearSrc"/>
  </div>
</template>

<script>
import logo from '@/../static/images/bank.png'

// accountName: '', // 开户名称
// accountNumber: '', // 银行卡账号
// openingBank: '', // 银行卡开户行
// picture: logo // 银行卡正面照

export default {
  name: 'bank-card-list',
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    },
    view: Boolean
  },
  data () {
    return {
      logo,
      previewImage: null
    }
  },
  methods: {
    deleteACard (index) {
      this.$emit('handle-delete', index)
    },
    editACard (index) {
      this.$emit('handle-edit', index)
    },
    previewImageModal (src) {
      this.previewImage = src
    },
    clearSrc () {
      this.previewImage = null
    }
  }
}
</script>

<style scoped>
/*银行卡信息*/
.bank_lb1{ position:relative; padding:20px 18px 10px 18px; background:#fafafa; border:1px #f0f0f0 solid; display:inline-block; border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; -webkit-border-radius:4px; margin:0 24px 15px 0;}
.bank_lb1 h1{ font-size:14px; color:rgba(0,0,0,0.85); font-weight:bold; margin-bottom:10px;}
.bank_lb1 h1 img{ width:25px; height:16px; float:left; margin-right:4px;}
.bank_xx{ width:350px;}
.bankl_l{ font-size:14px; color:rgba(0,0,0,0.65); width:195px; float:left; line-height:34px;}
.bankl_l p{overflow:hidden; white-space: nowrap; text-overflow: ellipsis;margin: 0;}
.bankl_r{ float:right;}
.bankl_r  img{ width:145px; height:92px; border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; -webkit-border-radius:4px; }
.bank_button{ display:inline-block; position:absolute; right:0; top:0; }
.bank_button button{
  width: 62px;
  height: 32px;
  border: none;
  outline: none;
  cursor: pointer;
  line-height:31px;
  color: #fff;
  background-color: #1890ff;
  border:none;
  font-weight: 400;
  text-align: center;
  font-size: 14px;
}
.bank_button button:last-child{border-radius:0 4px 0 0 ; -moz-border-radius:0 4px 0 0 ; -ms-border-radius:0 4px 0 0 ; -o-border-radius:0 4px 0 0 ; -webkit-border-radius:0 4px 0 0 ;}
</style>
